<template>
    <div class="customer-card">
        <div class="main-box">
            <div class="user-box">
                <img :src="props.baseInfo.avatar" class="photo" />
                <div class="user-info">
                    <el-tooltip effect="dark" placement="top-start" :content="props.baseInfo.group_name">
                        <span class="group-name zw-text-ellipsis2">{{ props.baseInfo.group_name }}</span>
                    </el-tooltip>
                    <span></span>
                    <p v-if="props.baseInfo.is_dissolved" class="dissolve">已解散</p>
                </div>
                <el-dropdown @command="onCommand">
                    <div class="handle">
                        <img src="@/assets/icon/more-icon1.png" class="handle-icon" />
                    </div>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item command="1">修改群公告</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
            <p v-if="props.baseInfo.owner_username" class="omit-text title-text">
                群主:{{ props.baseInfo.owner_username }}
            </p>
            <p v-if="props.baseInfo.member_nums" class="omit-text title-text">人数:{{ props.baseInfo.member_nums }}</p>
            <p v-if="props.baseInfo.notice" class="omit-text omit-text-notice">群公告:{{ props.baseInfo.notice }}</p>
            <el-divider v-if="props.tagInfo?.length" class="divider" />
            <Tags :tags="props.tagInfo" />
            <el-divider class="divider" />
            <div v-for="(item, index) in descList" :key="item.key" class="user-info-desc">
                <blockquote>
                    <label class="title">{{ item.n }}</label>
                    <span class="word"
                        >{{ bodyInfo[item.key] || (index <= 3 ? '0' : '') }}{{ index <= 3 ? '人' : '' }}</span
                    >
                </blockquote>
            </div>
        </div>

        <el-dialog v-model="showDialog" title="修改群公告" width="30%" destroy-on-close center>
            <div>
                <el-input v-model="dialogValue" placeholder="请输入" clearable />
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="showDialog = false">取消</el-button>
                    <el-button type="primary" @click="onCommit">确定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { defineProps, ref } from 'vue';
import { updateNotice } from '@/api/customer';
import Tags from './Tags.vue';
import { ElMessage } from 'element-plus';
const emit = defineEmits({
    initFun: null
});
interface Props {
    baseInfo: any;
    tagInfo: any;
    bodyInfo: any;
    touchModeList: any;
    groupId: any;
}
const descList = ref([
    { n: '群成员总数：', key: 'group_member_nums' },
    { n: '群员工数：', key: 'group_staff_nums' },
    { n: '外部联系人数：', key: 'outside_member_nums' },
    { n: '非外部联系人数：', key: 'no_outside_member_nums' },
    { n: '建群时间：', key: 'created_time' },
    { n: '最近联系员工：', key: 'contacts_staff' },
    { n: '最近联系时间：', key: 'contacts_time' },
    { n: '最近购买时间：', key: 'purchase_time' }
]);
const props = withDefaults(defineProps<Props>(), {
    baseInfo: {
        avatar: '',
        name: '',
        nickname: '',
        sex: 1,
        mobile: '',
        remark: ''
    },
    tagInfo: [], // 无数据
    bodyInfo: {},
    touchModeList: {},
    groupId: ''
});
const showDialog = ref(false);
const dialogValue = ref();

const onCommand = (e: string | number | object) => {
    showDialog.value = true;
    dialogValue.value = props.baseInfo.notice;
};

const onCommit = (e: string | number | object) => {
    // 修改备注,并静默更新视图数据
    const params = {
        group_id: props.groupId,
        notice: dialogValue.value
    };
    updateNotice(params).then((res: any) => {
        ElMessage.success('编辑成功！');
        showDialog.value = false;
        emit('initFun');
    });
};
</script>

<style lang="scss" scoped>
.customer-card {
    .tip-box {
        height: 16px;
        background-color: #ffc69e;
        text-align: center;
        font-size: 12px;
        font-weight: 500;
        color: #fff;
        line-height: 16px;
    }

    .main-box {
        padding: 10px 20px;

        .user-box {
            display: flex;
            align-items: center;

            .photo {
                width: 60px;
                height: 60px;
                background: #eaeaea;
                border-radius: 4px;
                vertical-align: middle;
                object-fit: cover;
            }

            .user-info {
                flex: auto;
                margin-left: 20px;

                span {
                    &:first-of-type {
                        font-size: 20px;
                        font-weight: 500;
                        color: #33302d;
                        line-height: 21px;
                    }

                    &:last-of-type {
                        font-size: 14px;
                        font-weight: 300;
                        color: #33302d;
                        line-height: 14px;
                    }
                }

                .dissolve {
                    width: 54px;
                    line-height: 22px;
                    text-align: center;
                    font-size: 12px;
                    color: #969696;
                    border-radius: 2px;
                    background: #efefef;
                    margin-top: 9px;
                }
            }

            .el-dropdown {
                align-self: flex-start;

                .handle {
                    width: 12px;
                    text-align: right;
                    cursor: pointer;

                    .handle-icon {
                        width: 3px;
                        align-self: flex-end;
                    }
                }
            }
        }

        .omit-text {
            margin: 10px 0;
            font-size: 13px;
            font-weight: 300;
            color: #969696;
            word-wrap: break-word;
            word-break: normal;
            -webkit-line-clamp: 2;
        }

        .omit-text-notice {
            line-height: 22px;
        }

        .title-text {
            font-size: 14px;
            color: #696969;
            -webkit-line-clamp: 1;
        }

        .divider {
            margin: 16px 0;
        }

        .user-info-desc {
            display: flex;
            margin-bottom: 16px;

            &:last-of-type {
                margin-bottom: 0;
            }

            .title {
                flex: 0 0 auto;
                font-size: 14px;
                font-weight: 300;
                color: #969696;
            }

            .word {
                flex: auto;
                font-size: 14px;
                font-weight: 300;
                color: #33302d;
            }
        }
    }
}

.el-popover {
    min-width: 200px;

    .cell-box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        line-height: 28px;
        font-size: 14px;
        font-weight: 300;

        .text1 {
            color: #33302d;
        }

        .text2 {
            color: #ff6b00;
        }
    }
}

.group-name {
    cursor: pointer;
    word-break: break-all;
}
</style>
